<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 800px;
        height: 800px;
        background-color: #bfa;
        /* 开启BFC，防止上边距折叠 */
        overflow: hidden;
      }
      .box1 div {
        width: 100px;
        height: 100px;

        margin-bottom: 100px;
        /* 出现了高度塌陷 */

        margin-left: 700px;
      }
      .box2 {
        background-color: gray;
        /* transition: all 1s; */
        /* 
                过渡（transition）
                    -通过过渡可以指定一个属性发生变化时的切换方式
                    -通过过渡可以创建一些非常好的效果，提高用户体验
            */

        /* transition-property ：指定要执行过渡的属性,
            多个属性使用逗号隔开
            大部分属性都支持过渡效果
            注意过渡时必须是从一个有效数值向另一个有效数值进行过渡
            不能从auto到一个确定值
            */
        transition-property: all;
        /* transiton-duration:指定过渡效果的持续时间
            时间单位：s 和 ms 1s=1000ms
            可以与property相对于分别指定时间
            */
        transition-duration: 2s;

        /* 
            transition-timing-function: 过渡的时序函数
                指定过渡的执行方式
                可选值：
                    ease：默认值，慢速开始，先加速，再减速
                    linear：匀速运动
                    ease-in：（开始慢）加速运动
                    ease-out：（结束慢）减速运动，一开始快
                    ease-in-out：（开始满，中间快，结束吗，慢）先加速后减速
                    cubic-bezier()：贝塞尔曲线来指定时序函数
                        http://cubic-bezier.com
                    step()  闪现几步到达终点
                        可以设置第一个第二个值：
                        end ，在时间结束时执行过渡
            */
        transition-timing-function: ease-in;
        /* 过渡效果的延迟 */
        transition-delay: 2s;

        /* transition 可以同时设置过渡相关的所有属性
            只有一个要求，如果要写延迟，第一是持续时间，第二个是延迟时间
            */
        transition: 2s margin-left 1s ease-in;
      }
      .box3 {
        background-color: orange;
        margin-left: 700px;

        transition-property: all;
        transition-duration: 2s;
      }
      .box1:hover div {
        /* border-radius: 50%; */
        background-color: red;
        margin-left: 0px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>
